<!DOCTYPE html>
<html lang="ZH_cn">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="pragma" content="no-cache">
	<title>阿来是-登录</title>
	<link rel="stylesheet" href="__PUBLIC__/home/css/index.css">
	<link rel="stylesheet" href="__PUBLIC__/3rd/bootstrap/css/bootstrap.min.css">
	<script src="__PUBLIC__/3rd/jquery/jquery.min.js"></script>

	<link rel="shortcut icon" href="__PUBLIC__/images/favicon.ico"/>
  <!--   <link rel="bookmark" href="__PUBLIC__/images/favicon.ico"/> -->
	<style>
		.modal-dialog{
			width: 480px;
			height:320px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -160px;
			margin-left: -240px;
		}
		.modal-body{

			padding: 64px;
		}

		.layoutCrow{
			position: fixed;
			top:0;
			left:0;
			bottom:0;
			right: 0;
		}
	</style>
</head>

<body>

	<div class="layoutCrow">

	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-body login_content">
	      <!-- <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> -->
		      <form id="loginForm" action="">
			      <a title="关闭" href="#" class="login_dialog_close" >×</a>
			        <h3 class="login_title">欢迎来到空间，请登录</h3>
			        <div class="user_input mtop-12" >
			        	<input type="text" name="username" id="username" placeholder="用户名">
			        </div>
			        <div class="pwd_input mtop-12">
			        	<input  id="password" type="password" name="password" placeholder="密码">
			        </div>
			        <button class="btn submit mtop-12"  style="background: #DE533C">登录</button>
			        <p style="position: absolute;bottom: 0;right: 60px;font-size: 12px;">新用户请先<a href="__APP__/Public/register.html">注册</a></p>
		      </form>
	      </div>
	    </div>
	  </div>

	</div>
	<div id="codeContainer" style="position: fixed;top:0;left:0;right:0;bottom:0;display: -webkit-box;-webkit-box-pack: center; -webkit-box-align: center;z-index:1080" class="hide">
		<div id="codeBox" style="width:300px;height:200px;background: #fff">
			<div class="title" style="height: 35px;line-height: 35px;background:#6699FF;position: relative;">
				<span style="color:#fff;padding-left: 4px;"><strong>请输入验证码</strong></span>
				<a id="codeClose" style="color:#ccc;font-size: 22px;position: absolute;top:-2px;right:6px;cursor: pointer">x</a>
			</div>
			<div class="mtop-12">
				<span style="padding-left: 22px;">验证码：</span>
				<input id="inputCode" type="text">
				<p id="codeTip" class="hide">验证码错误</p>
			</div>

			<img id="getcode_math" class="" src="{:u('Public/get_verification_code')}" title="看不清，点击换一张" style="    cursor: pointer;
    height: 40px;
    width: 140px;
    margin-top: 12px;
    margin: 12px 88px;
    display: block;"  onerror="" alt="..." />
    	<hr>
    	<button id="checkCode" style="    margin: 0 auto;
    display: block;
    width: 80px;
    height: 35px;
    border-radius: 3px;
    color: #fff;
    border: none;
    background: darkseagreen;" >完成</button>
		</div>

	</div>

	<script src="__PUBLIC__/3rd/bootstrap/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/3rd/jquery/jquery.validate.min.js"></script>
	<script src="__PUBLIC__/3rd/jquery/messages_zh.js"></script>
	<script src="__PUBLIC__/home/js/app.js"></script>

	<script>
	var Think = {
            "APP": '__APP__',
            "URL": '__URL__',
            "ROOT": '__ROOT__',
            "PUBLIC": '__PUBLIC__'
        };
		$(function(){

 			// var domObj = $("#imgContainer");
 			// var imgNum = Math.floor(Math.random()*10+1); //1-10
 			// domObj.addClass(`content_bg_${imgNum}`);
			var validateOptions = {
	                rules: {
	                    username:{
	                        required: true
	                    },
	                    password:{
	                    	required:true
	                    }
	                },
	                messages: {
	                    username:{
	                    	required:"请输入用户昵称",
	                    },
	                    password:{
	                    	required:"请输入密码"
	                    }
	                },
	                errorPlacement: function(error, element) {
	                	debugger;
	                	// element.val(error.text());
	                	element.attr("placeholder",error.text());
    					// error.appendTo(element.parent());
					}
	            };
	        var validator = $("#loginForm").validate(validateOptions);


 			$(".submit").bind("click", function(e){
 				e.preventDefault() ;
 				debugger;
 				if(validator.form()){
 					$("#codeContainer").removeClass("hide");
 					// $("#codeTip").addClass('hide');
 					$("#codeClose").unbind("click").bind("click", function(){
 						$("#codeContainer").addClass('hide');
 					});
 					$("#getcode_math").click(function(){
 					    $(this).attr("src","{:u('Public/get_verification_code')}?" + Math.random());
 					 });
 					$("#getcode_math").trigger("click");
 					$("#inputCode").val("");
 					$("#checkCode").unbind("click").bind("click", function(e){
 						e.preventDefault();
 						$("#inputCode").focus(function(){
				        	$(this).attr("placeholder","");
				        });

 						if($("#inputCode").val()){
 							$.ajax({
 								url:Think.APP+"/Public/check_code",
 								type:"post",
 								dataType:"json",
 								data:{"code":$("#inputCode").val()},
 								success:function(data){
 									debugger;
 									if (data.state==="success") {
 										userLogin();
 									}else{
 										$("#getcode_math").trigger("click");
										$("#inputCode").val("");
	                					$("#inputCode").attr("placeholder","验证码错误");
 									}
 								},
 								error:function(){
 									console.log("验证码验证失败");
 									$("#getcode_math").val("").trigger("click");

 								}
 							})
 						}else{
 							$("#inputCode").attr("placeholder","请输入验证码")
 						}
 					})
 				}

 			})
 			// $(".login_dialog_close").on("click",function(){
 			// 	window.location.href = "";


 			// })
 			function userLogin(){
 				var name = $.trim($("#username").val());
 				var pwd = $.trim($("#password").val());
 				if(name && pwd){
 					$("#codeContainer").addClass('hide');
					$.ajax({
	 					url:Think.APP+"/Public/check_login",
	 					type:"post",
	 					dataType:"json",
	 					data:{
	 						"username":name,
	 						"password":pwd
	 					},
	 					success:function(data){
	 						if(data.state==="success"){
	 							alert("登录成功");
	 							window.location.href="{:U('Index/index')}";
//	 							console.log("登录成功");
	 						}else{
	 							alert("用户名或密码错误");
	 						}
	 					},
	 					error:function(){
	 						alert("接口不存在")
	 					}
					})
				}
 			}
		})
	</script>
